import type { CommonComponentProps } from "../../editor/interface";
import { useMaterailDrop } from "../../editor/hooks/Drop";


function Page({ id, children, styles }: CommonComponentProps) {

  const { canDrop, drop } = useMaterailDrop(['Button', 'Container','Modal','Table','Form'], id);
  //使用封装好的drop方法
    return (
        <div
            ref={drop}
            data-component-id={id}
            className='p-[20px] h-[100%] box-border'
            style={{...styles, border: canDrop ? '2px solid blue' : 'none' }}
        >
            {children}
        </div>
    )
}

export default Page;
